<template>
  <div>
    <div class="register-wrapper">
      <div id="register">
        <p class="title">用户注册</p>
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="0"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input v-model="ruleForm2.username" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;">注册</el-button>
            <p class="login" @click="gotoLogin">已有账号？立即登录</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {Message} from 'element-ui'

  export default {
    name: "index",
    data() {
      // // <!--验证手机号是否合法-->
      // let checkTel = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请输入手机号码'))
      //   } else if (!this.checkMobile(value)) {
      //     callback(new Error('手机号码不合法'))
      //   } else {
      //     callback()
      //   }
      // }
      // //  <!--验证码是否为空-->
      // let checkSmscode = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请输入手机验证码'))
      //   } else {
      //     callback()
      //   }
      // }
      // // <!--验证密码-->
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"))
        } else {
          if (this.ruleForm2.checkPass !== "") {
            this.$refs.ruleForm2.validateField("checkPass");
          }
          callback()
        }
      }
      // <!--二次验证密码-->
      let validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm2.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      let checkUserName = (rule, value, callback) => {
          const reg = /^[A-Za-z0-9_@.]{6,20}$/;
          if (value == '' || value == undefined || value == null) {
            callback(new Error('用户名不能为空！'))
          } else if (Number(value.substring(0, 1)) >= 0) {
            callback(new Error('用户名必须是6-20位之间的字母、下划线！'))
          } else {
            if (!reg.test(value)) {
              callback(new Error('用户名必须是6-20位之间的字母、下划线！'))
            } else {
              callback()
            }
          }
        };

      return {
        ruleForm2: {
          enable: '0',
          password: "",
          checkPass: "",
        },
        rules2: {
          username: [{validator: checkUserName, trigger: 'change'}, {
            min: 4,
            max: 15,
            message: '用户名长度在 4 到 15 个字符',
            trigger: 'blur'
          }],
          password: [{validator: validatePass, trigger: 'change'},
            {min: 5, max: 15, message: '密码长度在 5 到 15 个字符', trigger: 'blur'}],
          checkPass: [{validator: validatePass2, trigger: 'change'}],

        },
        buttonText: '发送验证码',
        isDisabled: false, // 是否禁止点击发送验证码按钮
        flag: true
      }
    },
    methods: {

      // <!--发送验证码-->
      sendCode() {
        let tel = this.ruleForm2.tel
        if (this.checkMobile(tel)) {
          console.log(tel)
          let time = 60
          this.buttonText = '已发送'
          this.isDisabled = true
          if (this.flag) {
            this.flag = false;
            let timer = setInterval(() => {
              time--;
              this.buttonText = time + ' 秒'
              if (time === 0) {
                clearInterval(timer);
                this.buttonText = '重新获取'
                this.isDisabled = false
                this.flag = true;
              }
            }, 1000)
          }
        }
      },
      // <!--提交注册-->
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let that = this;
            this.instance.post('/w/users', this.ruleForm2)
              .then(function (response) {
                Message.success("用户注册成功,2秒后跳转登录页面。。。")
                setTimeout(function () {
                  that.$router.push({
                    path: "/login"
                  });
                }, 2000)
              })
              .catch(function (error) {
                console.log(error);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        })
      },
      // <!--进入登录页-->
      gotoLogin() {
        this.$router.push({
          path: "/login"
        });
      },
      // 验证手机号
      checkMobile(str) {
        let re = /^1\d{10}$/
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      }
    }
  };
</script>
<style scoped>
  .loading-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #aedff8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .register-wrapper img {
    position: absolute;
    z-index: 1;
  }

  .register-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  #register {
    max-width: 340px;
    margin: 60px auto;
    background: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 9;
  }

  .title {
    font-size: 26px;
    line-height: 50px;
    font-weight: bold;
    margin: 10px;
    text-align: center;
  }

  .el-form-item {
    text-align: center;
  }

  .login {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #1ab2ff;
    cursor: pointer;
    text-align: left;
    text-indent: 8px;
    width: 160px;
  }

  .login:hover {
    color: #2c2fd6;
  }

  .code >>> .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .code button {
    margin-left: 20px;
    width: 140px;
    text-align: center;
  }

  .el-button--primary:focus {
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
  }
</style>
